<template>
  <div class="base-form">
    <div class="model-title">1、填写申请信息</div>
    <el-form ref="apply-form" :model="form" class="size-auto width-100 form" :rules="rules" size="medium" label-width="130px">
      <el-form-item label="申请单位" prop="name">
        {{ info.contractorName }}
      </el-form-item>
      <el-form-item label="所属合同" prop="name">
       {{ info.contractName }}
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
       {{ info.projectName }}
      </el-form-item>
      <el-form-item label="养护范围" prop="name">
        <span>
            {{ info.highwayName }}
        </span>
       <span v-if="info.roadSection && info.scope !== 1">（{{ info.roadSection }}）</span>
       <span v-if="info.stakeNoRange && info.scope !== 1">-{{ info.stakeNoRange }}</span>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" :disabled="pageType==='edit'" clearable placeholder="请选择" style="width: 100%" @change="typeChange">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="计量周期" prop="cycle">
        <el-date-picker
            v-model="form.cycle"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            style="width: 100%;"
            placeholder="请选择月份"
             :picker-options="endDatePicker"
             @change="cycleChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="其他说明" prop="applicationInstructions">
        <el-input v-model.trim="form.applicationInstructions" maxlength="200" show-word-limit type="textarea" rows="3"></el-input>
      </el-form-item>
      <el-form-item label="电子签名" prop="esingnature">
        <Signature :applicant-signature.sync="form.applicantSignature"></Signature>
      </el-form-item>
    </el-form>
    <div class="btn">
      <BaseButton @click="handleNext">下一步</BaseButton>
    </div>
  </div>
</template>
<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        curStep: {
            type: [Number],
            required: true
        },
        pageType: {
            type: String,
            required: true,
        }
    },
    data() {
        return {
            form: {
                contractId: '',
                highwayCode: '',
                type: '',
                cycle: '',
                applicationInstructions: '',
                contractorId: '', // 申请单位Id 
                applicantSignature: ''

            },
            rules: {
                type: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                cycle: [
                    { required: true, message: '请选择计量周期', trigger: 'change' },
                ]
            },
            endDatePicker: this.handelFixDate(),
        }
    },
    computed: {
        types() {
            return this.$store.state.types.maintenanceApplyTypes || []
        }
    },
    watch: {
        info: {
            immediate: true,
            handler() {
                this.form.contractorId = this.info.contractorId
                this.form.highwayCode = this.info.highwayCode
                this.form.contractId = this.info.contractId
            }
        },
    },
    created() {
        this.getTypes()
    },
    methods: {
        handelFixDate() {
            return {
                disabledDate(time) {
                    const t = new Date().getDate()
                    // 如果想包含本月本月 - 8.64e7 * t 就不需要了，
                    // 如果想之前的不能选择把 > 换成 <
                    // return time.getTime() > Date.now() - 8.64e7 * t
                    return time.getTime() > Date.now() 
                },
            }
        },
        getTypes() {
            this.$store.dispatch('types/query', 'maintenanceApplyTypes')
        },
        // 下一步
        handleNext() {
            this.$refs['apply-form'].validate((valid) => {
                if (valid) {
                    this.$emit('next', this.form)
                }
            })
        },
        // 重置表单
        resetFrom() {
            this.$refs['apply-form'].resetFields()
            this.$refs['apply-form'].clearValidate()
        },
        // 类型变化
        typeChange() {
            // 当养护记录已选，类型变更时则重置所选养护记录
            this.$emit('typeChange')
        },
        // 周期变化 ，同理类型变化
        cycleChange() {
            this.$emit('sycleChange')
        },
    }
}
</script>
<style scoped lang="scss">
.base-form{
  height:  calc(100% - 90px);
  width: 100%;
  margin-top: 24px;
  box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.2);
  position: relative;
  .form{
    width: 50%;
  }
  .model-title{
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(131, 145, 178, 0.1);
  }
  .btn{
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 24px;
  }
}

</style>
